<template>
  <div class="app-container">
    <el-card>
      <el-row>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="card">
            <div class="card-img">
              <img src="@/assets/images/01icon.png">
            </div>
            <div class="card-content">
              <el-statistic title="人脸机" :value="outputValue"  />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="0" :md="0" :lg="0" :xl="0">
          <el-divider />
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="card">
            <div class="card-img">
              <img src="@/assets/images/01icon.png">
            </div>
            <div class="card-content">
              <el-statistic title="扬尘设备" :value="outputValue" />
            </div>
          </div>
        </el-col>
        <el-col :xs="24" :sm="0" :md="0" :lg="0" :xl="0">
          <el-divider />
        </el-col>
        <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
          <div class="card">
            <div class="card-img">
              <img src="@/assets/images/01icon.png">
            </div>
            <div class="card-content">
              <el-statistic title="监控设备" :value="outputValue" />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-top: 10px;">
        <el-card>
          <div ref="chartContainer" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-top: 10px;">
        <el-card>
          <div id="container" ref="chartContainerPie" style="width: 100%; height: 400px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-card style="margin-top: 10px;">
      <div id="containerLine" ref="chartContainerLine" style="width: 100%; height: 400px;"></div>
    </el-card>

    <!--  提示  -->
    <el-dialog
        v-model="dialogVisible"
        title="Tips"
        width="30%"
        :before-close="handleClose"
    >
      <span>目前只做样式！数据需要自己按需引入</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">我以知晓</el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="DashBoard">
import { Chart } from '@antv/g2';
import { onMounted } from 'vue';
import { useTransition } from '@vueuse/core';
import { ElMessageBox } from 'element-plus';

const dialogVisible = ref(true)
const handleClose = (done) => {
  dialogVisible.value = false
};

const source = ref(0)
const outputValue = useTransition(source, {
  duration: 3500,
})
source.value = 172000;

const data = ref([
  { letter: 'A', frequency: 0.08167 },
  { letter: 'B', frequency: 0.01492 },
  { letter: 'C', frequency: 0.02782 },
  { letter: 'D', frequency: 0.04253 },
  { letter: 'E', frequency: 0.12702 },
  { letter: 'F', frequency: 0.02288 },
  { letter: 'G', frequency: 0.02015 },
  { letter: 'H', frequency: 0.06094 },
  { letter: 'I', frequency: 0.06966 },
  { letter: 'J', frequency: 0.00153 },
  { letter: 'K', frequency: 0.00772 },
  { letter: 'L', frequency: 0.04025 },
  { letter: 'M', frequency: 0.02406 },
  { letter: 'N', frequency: 0.06749 },
  { letter: 'O', frequency: 0.07507 },
  { letter: 'P', frequency: 0.01929 },
  { letter: 'Q', frequency: 0.00095 },
  { letter: 'R', frequency: 0.05987 },
  { letter: 'S', frequency: 0.06327 },
  { letter: 'T', frequency: 0.09056 },
  { letter: 'U', frequency: 0.02758 },
  { letter: 'V', frequency: 0.00978 },
  { letter: 'W', frequency: 0.0236 },
  { letter: 'X', frequency: 0.0015 },
  { letter: 'Y', frequency: 0.01974 },
  { letter: 'Z', frequency: 0.00074 },
]);
const chartContainer = ref(null);
const chartContainerPie = ref(null);
const chartContainerLine = ref(null);
const pieData = ref([
  { item: '事例一', count: 40, percent: 0.4 },
  { item: '事例二', count: 21, percent: 0.21 },
  { item: '事例三', count: 17, percent: 0.17 },
  { item: '事例四', count: 13, percent: 0.13 },
  { item: '事例五', count: 9, percent: 0.09 },
]);
const lineData = ref([
  { year: '1991', value: 3 },
  { year: '1992', value: 4 },
  { year: '1993', value: 3.5 },
  { year: '1994', value: 5 },
  { year: '1995', value: 4.9 },
  { year: '1996', value: 6 },
  { year: '1997', value: 7 },
  { year: '1998', value: 9 },
  { year: '1999', value: 13 },
]);

function newLineChart(){
  const chart = new Chart({
    container: 'containerLine',
    autoFit: true,
  })
  chart
      .data(lineData.value)
      .encode('x', 'year')
      .encode('y', 'value')
      .scale('x', {
        range: [0, 1],
      })
      .scale('y', {
        domainMin: 0,
        nice: true,
      });
  chart.line().label({
    text: 'value',
    style: {
      dx: -10,
      dy: -12,
    },
  });
  chart.point().style('fill', 'white').tooltip(false);
  chart.render();
}

function newPieChart(){
  const chart = new Chart({
    container: 'container',
    autoFit: true,
  });

  chart.coordinate({ type: 'theta', outerRadius: 0.8, innerRadius: 0.5 });

  chart
      .interval()
      .data(pieData.value)
      .transform({ type: 'stackY' })
      .encode('y', 'percent')
      .encode('color', 'item')
      .legend('color', { position: 'bottom', layout: { justifyContent: 'center' } })
      .label({
        position: 'outside',
        text: (data) => `${data.item}: ${(data.percent * 100).toFixed(2)}%`,
      })
      .tooltip((data) => ({
        name: data.item,
        value: `${(data.percent * 100).toFixed(2)}%`,
      }));

  chart
      .text()
      .style('text', '主机')
      .style('x', '50%')
      .style('y', '50%')
      .style('dy', -25)
      .style('fontSize', 34)
      .style('fill', '#8c8c8c')
      .style('textAlign', 'center');

  chart
      .text()
      .style('text', '200')
      .style('x', '50%')
      .style('y', '50%')
      .style('dx', -25)
      .style('dy', 25)
      .style('fontSize', 44)
      .style('fill', '#8c8c8c')
      .style('textAlign', 'center');

  chart
      .text()
      .style('text', '台')
      .style('x', '50%')
      .style('y', '50%')
      .style('dx', 35)
      .style('dy', 25)
      .style('fontSize', 34)
      .style('fill', '#8c8c8c')
      .style('textAlign', 'center');

  chart.render();
}

function newChart(){
  const chart = new Chart({
    container: chartContainer.value, // 挂载到 DOM 元素
    autoFit: true,
    height: 400, // 设置图表高度
  });

  // 配置图表
  chart.interval().data(data.value).encode('x', 'letter').encode('y', 'frequency');

  // 渲染图表
  chart.render();
}

onMounted(() => {

  nextTick(() => {
    if (chartContainerPie.value) {
      newPieChart();
    }
    if (chartContainer.value) {
      newChart();
    }
    if (chartContainerLine.value) {
      newLineChart();
    }
  });
});
</script>

<style scoped>
.card{
  width: 100%;
  display: flex;
}

.card-img{
  width: 80px;
}

.card-img img{
  width: 80px;
}
.card-content{
  margin-top: 20px;
  margin-left: 15px;
}

.card-content-title{
  color: #536387;
  font-size: 12px;
}

.card-content-num{
  font-size: 28px;
}

</style>